<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>LoginByPhone</title>
    <link rel="StyleSheet" href="../css/login.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../css/pet-store-plus.css">

    <script src="/js/58cb2985af.js"></script>
<!--    <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>-->
</head>
<body>
<div id="topbar">
    <div id="LogoContent">
        <a> <img src="../images/logo-topbar.gif" /></a>
    </div>
    <div>
    </div>
</div>
<div class="sidebar" id="sidebar">
</div>
<div class="content" id="content">
    <div style="grid-column: span 1;grid-row: span 8"></div>
<div id="w">
    <div class="loginContent">
        <div class="loginTitle">
            <a class="btn" href="/admin/login" role="button" >Account Login</a>
            <a id="btn2" class="btn" href="/admin/login2" role="button">SMS Login</a>
        </div>

        <form action="/admin/loginByPhone" class="loginForm" method="post">
            <div class="loginFormItem">
                <label for="phoneNumber" class="loginFormLabel">
                    <i class="fa-solid fa-user"></i>
                </label>
                <input type="text" class="loginFormInput" name="phoneNumber" id="phoneNumber" placeholder="Please enter phone number">
            </div>

<!--            <div class="loginFormItem">-->
<!--                <label for="code" class="loginFormLabel">-->
<!--                    <i class="fa-solid fa-shield-halved"></i>-->
<!--                </label>-->
<!--                <input type="text" class="loginFormInputCode" name="code" id="code" placeholder="Please enter verification">-->
<!--                &lt;!&ndash; 图片验证码&ndash;&gt;-->
<!--            </div>-->

            <div class="loginFormItem"  >
                <label for="phoneCode" class="loginFormLabel">
                    <i class="fa-solid fa-lock"></i>
                </label>
                <input type="text" class="loginFormInputCode" name="phoneCode" id="phoneCode" placeholder="Please enter Dynamic code">
                <!--                怎么实现提交电话号码-->
                <button type="button" class="obtain" id="DynamicCodeButton" onclick="obtainLoginCode()">obtain</button>
            </div>

            <div class="loginFormLink">
                <p th:if="${errorMsg}" th:text="${errorMsg}" style="color: red;"></p>

            </div>

            <div class="loginFormItemSubmit">
                <input type="submit" class="loginFormSubmit" value="Login">
            </div>

            <div class="loginFormLink">
<!--                <a href="#" class="link1">Third-party logins</a>-->
                <a href="/admin/registerForm" class="link2">no Account? go register</a>
            </div>
        </form>
    </div>
</div>
</div>
<script>
    function obtainLoginCode(){
        var pn=document.getElementById("phoneNumber").value;
        alert('已发送验证码至' + pn); // 只有确定选项，没有取消选项
        console.log(pn);
        var url="/admin/sendPhoneCodeForAdminLogin?phoneNumber="+pn;
        fetch(url, {
            method: 'GET',
        })
            .then(response => {
                if (response.ok) {
                    console.log()

                } else {
                    console.log("请求失败：" + response.status);
                }
            })
            .catch(error => {
                console.error('发生错误:', error);
            });
    }
</script>
</body>
</html>